<template>
    <div class="cartList">
        <!-- 1. 间隔槽-->
        <gap-comp :height="1"></gap-comp>
        <!-- 无数据 -->
        <van-empty description="暂无数据！" v-if="cartList.length == 0" />
        <!-- 有数据 -->
        <!-- 购物车列表区域 -->
        <div v-else>
            <van-swipe-cell v-for="(item, index) in cartList" :key="item.id">
                <van-card :price="item.price" desc="描述信息" :title="item.goodsname" class="goods-card"
                    :thumb="$pre + item.img" centered>
                    <!-- 左侧状态区域 -->
                    <template #tags>
                        <van-checkbox v-model="item.status" checked-color="#FF6040" @click="changeOne"></van-checkbox>
                    </template>
                    <!-- 右下角数量操作区域 -->
                    <template #num>
                        <van-button size="mini" type="info" color="#FF6040" :disabled="item.num == 1"
                            @click="changeNum(1, index, item.id)"> -
                        </van-button>
                        <span> ×{{ item.num }} </span>
                        <van-button size="mini" type="info" color="#FF6040" :disabled="item.num == 5"
                            @click="changeNum(2, index, item.id)"> +
                        </van-button>
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" color="#FF6040" />
                </template>
            </van-swipe-cell>
            <!-- 间隔槽 -->
            <gap-comp :height="5" bg="#DDD"></gap-comp>
            <!-- 底部订单提交导航区域 -->
            <van-submit-bar safe-area-inset-bottom :price="jisuan.countMoney" button-text="提交订单" @submit="onSubmit">
                <van-checkbox checked-color="#FF6040" v-model="allStatus" @click="changeAll">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            uid: this.$utils.getUid(),
            cartList: [],//购物车数据
            allStatus: true,//全选的初始状态
        };
    },
    // 使用计算属性统计支付金额和购买的商品数量
    computed: {
        jisuan() {
            let count = this.cartList.reduce((prev, item, index) => {
                // 统计用户选中的商品 iten.status=true
                if (item.status) {
                    prev.countMoney += parseFloat(item.price) * parseInt(item.num)
                    prev.countNumber += parseInt(item.num)
                }
                return prev
            }, { countMoney: 0, countNumber: 0 })
            return count
        }
    },
    mounted() {
        this.getCartList()
    },
    methods: {
        // 1.获取购物车数据
        getCartList() {
            this.$api.reqCartList({ uid: this.uid })
                .then(res => {
                    console.log(res)
                    this.cartList = res
                    // 处理每条记录中的status值 number ==>bool
                    this.cartList.forEach(item => {
                        item.status = true
                        // item.checked = true
                        // this.$set(item,'checked',true)
                    })
                })
                .catch(err => console.log(err))
        },
        // 2.单选操作
        changeOne(info) {
            // 同步自身状态
            // 视图变数据变
            // 同步全选状态 every(有一个false返回false)  some有一个true返回true)
            this.allStatus = this.cartList.every(item => item.status)
        },
        // 3.全选反选
        changeAll() {
            // 同步自身状态
            // 视图变数据变
            // 同步单选状态 every(有一个false返回false)  some有一个true返回true)
            this.cartList.forEach(item => item.status = this.allStatus)
        },
        // 4.数量管理
        changeNum(type, index, id) {
            // 1.同步页面节点数量
            if (type == 1) { //--
                --this.cartList[index].num
            } else {//++
                ++this.cartList[index].num
            }
            // 2.同步数据库购物车数量
            this.$api.reqCartEdit({ id, type })
                .then(res => {
                    console.log(res)
                })
                .catch(err => console.log(err))

        },
        // 6.提交确认订单
        onSubmit() {
            // 1.获取订单确认数据
            // let orders = this.cartList.map(item => item.status)
            // console.log(orders)

            let orders = []
            this.cartList.forEach(item => {
                if (item.status) orders.push(item)
            })
            if (orders.length == 0) {
                this.$notify({
                    type: 'warning',
                    message: '请选择商品信息！'
                }); return;
            }

            // 2.将确认订单数据缓存到本地中（下单成功后删除即可） {countMoney:"",countNumber:""}
            localStorage.setItem('orderData', JSON.stringify({ orders, ...this.jisuan }))

            // 3.跳转到订单确认页面
            this.$router.push('/orderconfirm')
        }
    },
};
</script>

<style lang="less" scoped>
@import "../../assets/less/cart.less";
</style>
